import React, { Component } from 'react'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
// import * as actionCreators from './store/actionCreators'
import { actionCreators } from './store'
import { actionCreators as loginActionCreators } from '../../page/login/store'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    SearchWrapper,
    NavSearch,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem,
    Addition,
    Button
} from './style'
import { Link } from 'react-router-dom'

class Header extends Component {
    getListArea(){
        const { focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props
        // 转换为普通对象
        const newList = list.toJS()
        const pageList = []
        if(newList.length){
            for(let i = (page - 1) * 10; i < page * 10; i++){
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        
        if (focused || mouseIn) {
            return (
                <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch onClick={() => { handleChangePage(page, totalPage, this.spinIcon) }}>
                          <span ref={(icon) => { this.spinIcon = icon }} className="iconfont spin">&#xe851;</span>
                          换一批
                        </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        { pageList }
                    </SearchInfoList>
                </SearchInfo>
            )
        } else {
            return null;
        }
    }
    render() {
        const {focused, list, login, handleInputFocus, handleInputBlur, logout } = this.props
        return (
            <HeaderWrapper>
                {/* <Logo href="/"></Logo> */}
                <Link to="/">
                <Logo></Logo>
                </Link>
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    {
                        login ? <NavItem onClick={ logout } className="right">退出</NavItem> : <Link to="/login"><NavItem className="right">登录</NavItem></Link>
                    }
                    <NavItem className="right">
                        <span className="iconfont a">&#xe904;</span>
                    </NavItem>

                    <SearchWrapper>
                        < CSSTransition in={focused} timeout={400} classNames="slide">
                            <NavSearch className={focused ? 'focused' : ''} onFocus={() => {handleInputFocus(list)}} onBlur={handleInputBlur}></NavSearch>
                        </CSSTransition>
                        <span className={focused ? 'iconfont zoom focused' : 'iconfont zoom'}>&#xe62b;</span>
                        { this.getListArea() }
                    </SearchWrapper>

                </Nav>
                <Addition>
                    <Link to="/write">
                    <Button className="writing">
                        <span className="iconfont ic-write">&#xe616;</span>
                        写文章
                    </Button>
                    </Link>
                    <Button className="reg">注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }

}

const mapStateToProps = (state) => {
    return {
        // focused: state.header.get('focused')
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        login: state.getIn(['login', 'login'])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            if(list.size === 0){
                dispatch(actionCreators.getList())
            }
            dispatch(actionCreators.searchFocus())
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur())
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
            if(originAngle){ 
                originAngle = parseInt(originAngle, 10)
            }else{
                originAngle = 0
            }
            spin.style.transform = `rotate(${originAngle + 360}deg)`
            if(page < totalPage){
                dispatch(actionCreators.changePage(page + 1))
            }else{
                dispatch(actionCreators.changePage(1))
            }
            
        },
        logout(){
            dispatch(loginActionCreators.logout())
        }
    }
}

// export default Header
export default connect(mapStateToProps, mapDispatchToProps)(Header)